
<template>
  <!--
  el-form : 表单组件
    :model="ruleForm" 表单数据 (对象形式)
     :rules="rules"   校验规则
     ref="ruleForm" 注册通过 $refs获取DOM元素
     label-width="100px" : label标签的宽度

  el-form-item : 表单子组件
    label : 标签文字
    prop : 校验 (待会)

  el-button
      type : primary(蓝色) success(绿色)  danger(红色)

   span='24'  意思是 字符串24 赋值给 span
   :span='24' 意思是number24 赋值给span
   span='true' 意思是字符串 true 赋值给span
   :span='true' 意思是布尔true 赋值给 span
  -->
  <el-row class="row" type="flex" justify="center" align="middle">
    <el-col :span="8">
      <el-form class="form" :model="loginForm" :rules="rules" ref="loginForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="startLogin()">登录</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
// 引入  axios
/* eslint-disable-next-line */
import axios from "axios";

export default {
  data () {
    return {
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      rules: {
        username: [
          // 如果不写内容会 触发
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 如果格式不正确会触发
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          // 如果不写内容会 触发
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 如果格式不正确会触发
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 1 开始 登录
    startLogin () {
      // validate 也是校验,(方法)
      // validate 布尔类型 true校验成功/ false 校验失败
      // 除了上面组件里面的失去焦点会校验一次,,事件里也要校验一次,
      // 防止上面没有失去焦点就直解点击登录按钮了
      this.$refs.loginForm.validate(async valid => {
        if (!valid) {
          return console.log('校验失败')
        }

        let res = await axios.post(
          'http://localhost:8888/api/private/v1/login',
          this.loginForm
        )
        if (res.data.meta.status === 200) {
          // 把后台返回给我们的token 保存到本地
          localStorage.setItem('token', res.data.data.token)

          // 1.2 提示
          this.$message({
            message: res.data.meta.msg,
            type: 'success',
            duration: 800
          })
          // 1.3 登录成功后跳转到home页面
          this.$router.push('/home')
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'error',
            duration: 800
          })
        }

        // 1.1 发送请求登录
        // post 参数1:请求路径   参数2:请求参数
        // axios
        //   .post('http://localhost:8888/api/private/v1/login', this.loginForm)
        //   .then(res => {
        //     console.log(res)

        // if (res.data.meta.status === 200) {
        //   // 把后台返回给我们的token 保存到本地
        //   localStorage.setItem('token', res.data.data.token)

        //   // 1.2 提示
        //   this.$message({
        //     message: res.data.meta.msg,
        //     type: 'success',
        //     duration: 800
        //   })
        //   // 1.3 登录成功后跳转到home页面
        //   this.$router.push('/home')
        // } else {
        //   this.$message({
        //     message: res.data.meta.msg,
        //     type: 'error',
        //     duration: 800
        //   })
        // }
        //   })
      })
    },
    // 校验
    resetForm () {
      this.$refs.loginForm.resetFields()
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  height: 100%;
}

.row {
  height: 100%;
  background: #2d434c;
}

.form {
  background: #fff;
  padding: 30px;
  border-radius: 20px;
}
</style>
